<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>添加食品 - 食物食材食品基本信息Web系统</title>
  <link rel="stylesheet" href="css/style.css">
  <script>
    if (!sessionStorage.getItem('isLoggedIn')) {
      window.location.href = 'login.html';
    }
  </script>
</head>
<body>
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <header>
    <h1>食物食材食品基本信息Web系统</h1>
    <nav>
      <div class="user-menu" id="userMenu">
        <img src="img/avatar.png" alt="头像" class="avatar" id="userAvatar">
        <span class="username" id="usernameDisplay">用户</span>
        <span class="dropdown-arrow">&#9662;</span>
        <div class="dropdown-menu" id="dropdownMenu">
          <a href="#" id="profileLink"><span class="menu-icon">&#8962;</span> 个人空间</a>
          <a href="login.html" id="logout"><span class="menu-icon">&#9906;</span> 退出登录</a>
        </div>
      </div>
    </nav>
  </header>
  <main>
    <a href="index.html" class="back-home-btn"><span>返回首页</span></a>
    <section>
      <h2>添加食品基本信息</h2>
      <form id="addProductForm" enctype="multipart/form-data" class="data-form">
        <div class="form-row">
          <div class="form-group">
            <label for="productName"><span style="color:red">*</span>食品名称：</label>
            <input type="text" id="productName" name="productName" required>
          </div>
          <div class="form-group">
            <label for="origin"><span style="color:red">*</span>产地：</label>
            <input type="text" id="origin" name="origin" required>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="productionDate"><span style="color:red">*</span>出产日期：</label>
            <input type="date" id="productionDate" name="productionDate" required>
          </div>
          <div class="form-group">
            <label for="producer"><span style="color:red">*</span>生产单位：</label>
            <input type="text" id="producer" name="producer" required>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="price"><span style="color:red">*</span>交易价格：</label>
            <input type="text" id="price" name="price" placeholder="如：15元/个" required>
          </div>
          <div class="form-group">
            <label for="supplier"><span style="color:red">*</span>供货商：</label>
            <input type="text" id="supplier" name="supplier" required>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label for="photo"><span style="color:red">*</span>照片：</label>
            <input type="file" id="photo" name="photo" accept="image/*" required>
          </div>
          <div class="form-group">
            <label for="ingredients"><span style="color:red">*</span>主要成分：</label>
            <input type="text" id="ingredients" name="ingredients" placeholder="如：面粉、酵母、盐、水" required>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group full-width">
            <label for="description">介绍：</label>
            <textarea id="description" name="description" rows="3" placeholder="详细描述食品的特点、口感等"></textarea>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group full-width">
            <label for="recipe"><span style="color:red">*</span>制作方法：</label>
            <textarea id="recipe" name="recipe" rows="4" placeholder="详细描述制作工艺、步骤等" required></textarea>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group full-width">
            <label for="effects"><span style="color:red">*</span>功效：</label>
            <textarea id="effects" name="effects" rows="3" placeholder="描述食品的营养价值、功效等" required></textarea>
          </div>
        </div>
        <div class="form-row">
          <div class="form-group full-width">
            <label for="relatedRecipes">关联食谱：</label>
            <textarea id="relatedRecipes" name="relatedRecipes" rows="3" placeholder="可选的关联食谱或推荐搭配"></textarea>
          </div>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">保存食品信息</button>
          <button type="button" class="btn btn-secondary" id="resetBtn">重置表单</button>
        </div>
      </form>
    </section>
    
    <section id="successMessage" style="display: none;">
      <div class="success-alert">
        <h3>添加成功！</h3>
        <p>食品信息已成功保存到数据库。</p>
        <button class="btn btn-primary" onclick="location.reload()">继续添加</button>
        <a href="search.html" class="btn btn-secondary">查看数据</a>
      </div>
    </section>
  </main>
  <footer>
    <p>&copy; 2025 食物食材食品基本信息Web系统</p>
  </footer>
  <script src="js/add_product.js"></script>
  <script src="js/user_menu.js"></script>
</body>
</html> 